<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/* body {
    background-color: rgb(119, 115, 110);
  } */

  .carousel ul {
    height: 200px;
    width: 800px;
    padding: 0;
    position: absolute;
    /* 水平居中 */
    left: 50%;
    margin-left: -400px;
    /* 垂直居中 */
    top: 50%;
    margin-top: -100px;
    list-style: none;
  }

  /* 移入到轮播图区域把鼠标形状变成‘手’ */
  .carousel ul:hover {
    cursor: pointer;
  }

  .carousel li {
    position: absolute;
    left: 0;
    /* 过渡属性，让轮播图切换更自然 */
    transition: 0.5s;
  }




        </style>
</head>
<body>
    <div class="carousel">
        <ul id="banner"></ul>
        <script >
            // 获取banner元素
var cur_ul=document.getElementById("banner");
var arr=new Array();

for (i = 1; i <= 4; i++) {

    var cur_li = document.createElement("li");

    var cur_img = document.createElement("img");
    // 给img元素设置src、width、height属性
    cur_img.src = "img/" + i + ".png";
    cur_img.style.width = "663px";
    cur_img.style.height = "376px";
    cur_img.style.left="1000px";

    //节点设置
    cur_li.appendChild(cur_img);
    cur_ul.appendChild(cur_li);

    //鼠标移进来停止轮播
    cur_ul.onmouseenter = function () {
      clearInterval(timer);
    };
    // 鼠标移出ul继续轮播图片
    cur_ul.onmouseleave = function () {
      timer = setInterval(get_next, 3000);
    };
    //添加到arr数组
    arr.push(cur_li);
  }

    //轮播效果设置
  var len = arr.length - 1;
  arr[len - 2].style.left = "0px";
  arr[len - 1].style.left = "200px";
  arr[len].style.left = "400px";
  //中间图片等比例放大
  arr[len - 1].style.transform = "scale(1.3)";
  arr[len - 1].style.zIndex = 100;

  //创建出自动堆叠轮播图的效果
  function get_next() {
    var give_up = arr[arr.length - 1]; 
    arr.pop(); 
    arr.unshift(give_up); 
    for (var i = 0; i < arr.length; i++) {
      arr[i].style.zIndex = i;
      arr[i].style.transform = "scale(1)";
    }
    arr[len - 2].style.left = "0px";
    arr[len - 1].style.left = "200px";
    arr[len].style.left = "400px";
    arr[len - 1].style.transform = "scale(1.3)";
    arr[len - 1].style.zIndex = 100;
  }

  // 设置一个自动轮播定时器  触发get_next()
  var timer = setInterval(get_next, 3000);

  // 用js创建左箭头
  var pre_img = document.createElement("img");
  pre_img.src = "img/pre-icon.png";
  pre_img.style.position = "absolute";
  pre_img.style.width = "30px";
  pre_img.style.top = "187px";
  pre_img.style.bottom = 0;
  pre_img.style.left = "83px";
  pre_img.style.margin = "auto";
  pre_img.style.zIndex = 100;
  cur_ul.appendChild(pre_img);

  // 用js创建右箭头
  var next_img = document.createElement("img");
  next_img.src = "img/next-icon.png";
  next_img.style.position = "absolute";
  next_img.style.width = "30px";
  next_img.style.top ="187px";
  next_img.style.bottom = 0;
  next_img.style.right = "-179px";
  next_img.style.margin = "auto";
  next_img.style.zIndex = 100;
  cur_ul.appendChild(next_img);

// 给箭头点击绑定事件
pre_img.onclick = function () {
    get_pre();
};
next_img.onclick = function () {
    get_next();
};
//点击箭头进行轮换
function get_pre() {
    var give_up = arr[0];
    arr.shift();
    arr.push(give_up);
    for (var i = 0; i < arr.length; i++) {
      arr[i].style.zIndex = i;
      arr[i].style.transform = "scale(1)";
    }
    arr[len - 2].style.left = "0px";
    arr[len - 1].style.left = "200px";
    arr[len].style.left = "400px";
    arr[len - 1].style.transform = "scale(1.3)";
    arr[len - 1].style.zIndex = 100;
  }


        </script>

    </div>
    
</body>
</html>
